<!DOCTYPE html>
<html>
<head>
    <title>Resistor Network Diagram</title>
</head>
<body>
    <canvas id="canvas" width="500" height="350"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Define dimensions and starting position
        const startX = 100;
        const startY = 80;
        const squareSize = 60;
        const numSquares = 4;
        const totalWidth = squareSize * numSquares;
        const totalHeight = squareSize;

        // Set line style
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // Draw the outer rectangle (the main frame of the 4 squares)
        ctx.strokeRect(startX, startY, totalWidth, totalHeight);

        // Draw the inner vertical lines to divide the rectangle into 4 squares
        for (let i = 1; i < numSquares; i++) {
            ctx.beginPath();
            ctx.moveTo(startX + i * squareSize, startY);
            ctx.lineTo(startX + i * squareSize, startY + totalHeight);
            ctx.stroke();
        }

        // Set font style for labels A and B
        ctx.font = "italic 30px 'Times New Roman'";
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Draw label A
        ctx.fillText('A', startX - 30, startY);

        // Draw label B
        ctx.fillText('B', startX - 30, startY + totalHeight);
        
        // Set font style for the caption "图 1"
        ctx.font = "24px 'KaiTi', 'SimSun', serif"; // Use a common Chinese font, with fallbacks
        
        // Draw the caption "图 1"
        const captionX = startX + totalWidth / 2;
        const captionY = startY + totalHeight + 50;
        ctx.fillText('图 1', captionX, captionY);

    </script>
</body>
</html>